// 自定义一些通用的compositions api
import { useIntersectionObserver } from "@vueuse/core";
import { onBeforeMount, onMounted, ref } from "vue";

// 封装通用的数据懒加载api
export function useLazyData(apiFn: () => void) {
  // 通过 ref 获得组件实例
  const target = ref(null);
  const { stop } = useIntersectionObserver(
    // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }]) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) {
        stop();
        apiFn();
      }
    },
    {
      threshold: 0,
    }
  );
  return target;
}

export function useHMScrollY() {
  // 监听滚动条的滚动，获取滚动的距离，滚动距离>=78，动态的设置show类
  // 等dom加载完，注册事件监听 created(vue3中直接写setup中) mounted（注册生命周期事件）
  const y = ref(0);
  const onScroll = () => {
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    console.log("页面的滚动距离 scrollTop", scrollTop);
    y.value = scrollTop;
  };

  onMounted(() => {
    window.addEventListener("scroll", onScroll);
  });

  // beforeDestroy 准备要卸载组件了，事件清一清
  onBeforeMount(() => {
    window.removeEventListener("scroll", onScroll);
  });
  return y;
}
